<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>

  <title>Vite App</title>
</head>

<body>
    <div id="app" class="demo">
        ----------
    </div>
    ##########
    <br>

    <script>
        const app = Vue.createApp({
            data(){
                return {
                    number : 1,
                    string : 'ABC'
                }
            }
        })
        const vm = app.mount("#app")

        document.write("DEF")
        document.write("<br>")
        document.write("vm.number:",vm.number)
        document.write("<br>")
        document.write("vm.$data.number:",vm.$data.number)

        vm.number = 2
        document.write("<br>")
        document.write("vm.number:",vm.number)

        vm.$data.number = 3
        document.write("<br>")
        document.write("vm.number:",vm.number)

        
        document.write("<br>")
        document.write("vm.string:",vm.string)

        vm.string = "GHJ"
        document.write("<br>")
        document.write("vm.string:",vm.string)



    </script>
</body>

</html>
